<template>
  <div class="salary-chart-container">
    <div class="salary-chart">
      <!-- 第一列 -->
      <div class="column" v-for="(col, colIndex) in columns" :key="colIndex">
        <div 
          class="row" 
          v-for="(item, index) in col" 
          :key="index"
          :style="{
            background: `linear-gradient(to right, ${getGradient(colIndex, index)})`,
            height: `${item.rowspan ? item.rowspan * 60 : 60}px`
          }"
        >
          <div class="cell level">{{ item.level }}</div>
          <div class="cell title">{{ item.title }}</div>
          <div class="cell salary">{{ item.salary }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        // 第一列
        [
          { level: "P5", title: "工程师", salary: "¥35-66万", rowspan: 2 },
          { level: "", title: "", salary: "", rowspan: 0 }, // 空行用于合并单元格
          { level: "P6", title: "高级工程师", salary: "¥48-64万", rowspan: 2 },
          { level: "", title: "", salary: "", rowspan: 0 },
          { level: "P7", title: "专家/经理", salary: "¥91-118万", rowspan: 2 },
          { level: "", title: "", salary: "", rowspan: 0 }
        ],
        // 第二列
        [
          { level: "1-2", title: "工程师", salary: "¥41-48万", rowspan: 2 },
          { level: "", title: "", salary: "", rowspan: 0 },
          { level: "2-1", title: "资深工程师", salary: "¥53-71万", rowspan: 2 },
          { level: "", title: "", salary: "", rowspan: 0 },
          { level: "2-2", title: "专家", salary: "¥86-118万", rowspan: 2 },
          { level: "", title: "", salary: "", rowspan: 0 }
        ],
        // 第三列
        [
          { level: "6(2-1)", title: "工程师", salary: "¥37-47万" },
          { level: "7(2-2)", title: "工程师", salary: "¥44-50万" },
          { level: "8(2-3)", title: "工程师", salary: "¥46-55万" },
          { level: "9(3-1)", title: "工程师", salary: "¥59-78万" },
          { level: "10(3-2)", title: "工程师/副组长", salary: "¥82-120万" },
          { level: "3-1", title: "", salary: "" }
        ]
      ]
    };
  },
  methods: {
    getGradient(colIndex, rowIndex) {
      // 橙色系渐变
      if(colIndex === 0) {
        const oranges = ["#FF9A2E", "#FF8200"];
        return oranges.join(",");
      }
      // 蓝色系渐变
      if(colIndex === 1) {
        const blues = ["#5B9DFF", "#2E7BFF"];
        return blues.join(",");
      }
      // 第三列交替颜色
      const alternates = ["#F0F0F0", "#E0E0E0"];
      return alternates[rowIndex % 2].repeat(2);
    }
  }
};
</script>

<style scoped>
.salary-chart-container {
  padding: 20px;
  background: white;
}

.salary-chart {
  display: flex;
  border: 1px solid #ddd;
}

.column {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  border-bottom: 1px solid #ddd;
  align-items: center;
  padding: 0 10px;
}

.column:not(:last-child) .row {
  border-right: 1px solid #ddd;
}

.cell {
  flex: 1;
  padding: 8px;
  color: #333;
  font-weight: 500;
}

.level {
  min-width: 80px;
}

.title {
  min-width: 120px;
}

.salary {
  min-width: 100px;
  text-align: right;
}
</style>